<!DOCTYPE html>
<html lang="en">
  <head>
    <title>
        Java-front-VUE-2 - rulerLwx Blog
      </title>
        <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-transform" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no,email=no,adress=no">
    
    <meta name="theme-color" content="#000000" />
    
    <meta http-equiv="window-target" content="_top" />
    
    
    <meta name="description" content="事件 事件函数传参 在 Vue 中，使用事件绑定机制，为元素指定处理函数时，如果加了小括号，就可以给函数传参 &amp;lt;a href=&amp;quot;&amp;quot; @click.prevent=&amp;quot" />
    <meta name="generator" content="Hugo 0.73.0 with theme pure" />
    <title>Java-front-VUE-2 - rulerLwx Blog</title>
    
    
    <link rel="stylesheet" href="https://rulerLwx.gitee.io/css/style.min.c4bc7071f132c964c2116bca53b392933f377e5ca7b7051ed245187c621a2d3e.css">
    
    <link rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/9.15.10/styles/github.min.css" async>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.css" async>
    <meta property="og:title" content="Java-front-VUE-2" />
<meta property="og:description" content="事件 事件函数传参 在 Vue 中，使用事件绑定机制，为元素指定处理函数时，如果加了小括号，就可以给函数传参 &lt;a href=&quot;&quot; @click.prevent=&quot" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://rulerLwx.gitee.io/2018/06/java-front-vue-2/" />
<meta property="article:published_time" content="2018-06-20T10:03:02+08:00" />
<meta property="article:modified_time" content="2018-06-20T10:03:02+08:00" />
<meta itemprop="name" content="Java-front-VUE-2">
<meta itemprop="description" content="事件 事件函数传参 在 Vue 中，使用事件绑定机制，为元素指定处理函数时，如果加了小括号，就可以给函数传参 &lt;a href=&quot;&quot; @click.prevent=&quot">
<meta itemprop="datePublished" content="2018-06-20T10:03:02&#43;08:00" />
<meta itemprop="dateModified" content="2018-06-20T10:03:02&#43;08:00" />
<meta itemprop="wordCount" content="3443">



<meta itemprop="keywords" content="" /><meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Java-front-VUE-2"/>
<meta name="twitter:description" content="事件 事件函数传参 在 Vue 中，使用事件绑定机制，为元素指定处理函数时，如果加了小括号，就可以给函数传参 &lt;a href=&quot;&quot; @click.prevent=&quot"/>

    <!--[if lte IE 9]>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js"></script>
      <![endif]-->

    <!--[if lt IE 9]>
        <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
      <![endif]-->
  </head>

  
  

  <body class="main-center theme-black" itemscope itemtype="http://schema.org/WebPage"><header class="header" itemscope itemtype="http://schema.org/WPHeader">
    <div class="slimContent">
      <div class="navbar-header">
        <div class="profile-block text-center">
          <a id="avatar" href="https://gitee.com/rulerLwx" target="_blank">
            <img class="img-circle img-rotate" src="https://rulerLwx.gitee.io/avatar.png" width="200" height="200">
          </a>
          <h2 id="name" class="hidden-xs hidden-sm">rulerLwx</h2>
          <h3 id="title" class="hidden-xs hidden-sm hidden-md">thinking...</h3>
          <small id="location" class="text-muted hidden-xs hidden-sm"><i class="icon icon-map-marker"></i>Guangzhou, China</small>
        </div><div class="search" id="search-form-wrap">
    <form class="search-form sidebar-form">
        <div class="input-group">
            <input type="text" class="search-form-input form-control" placeholder="Search" />
            <span class="input-group-btn">
                <button type="submit" class="search-form-submit btn btn-flat" onclick="return false;"><i
                        class="icon icon-search"></i></button>
            </span>
        </div>
        <div class="ins-search">
            <div class="ins-search-mask"></div>
            <div class="ins-search-container">
                <div class="ins-input-wrapper">
                    <input type="text" class="ins-search-input" placeholder="Type something..."
                        x-webkit-speech />
                    <button type="button" class="close ins-close ins-selectable" data-dismiss="modal"
                        aria-label="Close"><span aria-hidden="true">×</span></button>
                </div>
                <div class="ins-section-wrapper">
                    <div class="ins-section-container"></div>
                </div>
            </div>
        </div>
    </form>
</div>
        <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <nav id="main-navbar" class="collapse navbar-collapse" itemscope itemtype="http://schema.org/SiteNavigationElement" role="navigation">
        <ul class="nav navbar-nav main-nav">
            <li class="menu-item menu-item-home">
                <a href="/">
                    <i class="icon icon-home-fill"></i>
                  <span class="menu-title">Home</span>
                </a>
            </li>
            <li class="menu-item menu-item-archives">
                <a href="/posts/">
                    <i class="icon icon-archives-fill"></i>
                  <span class="menu-title">Archives</span>
                </a>
            </li>
            <li class="menu-item menu-item-categories">
                <a href="/categories/">
                    <i class="icon icon-folder"></i>
                  <span class="menu-title">Categories</span>
                </a>
            </li>
            <li class="menu-item menu-item-tags">
                <a href="/tags/">
                    <i class="icon icon-tags"></i>
                  <span class="menu-title">Tags</span>
                </a>
            </li>
            <li class="menu-item menu-item-about">
                <a href="/about/">
                    <i class="icon icon-cup-fill"></i>
                  <span class="menu-title">About</span>
                </a>
            </li>
        </ul>
      </nav>
    </div>
  </header>

<aside class="sidebar" itemscope itemtype="http://schema.org/WPSideBar">
  <div class="slimContent">
    
      <div class="widget">
    <h3 class="widget-title">Board</h3>
    <div class="widget-body">
        <div id="board">
            <div class="content">enjoy~
            </div>
        </div>
    </div>
</div>

      <div class="widget">
    <h3 class="widget-title"> Categories</h3>
    <div class="widget-body">
        <ul class="category-list">
            <li class="category-list-item"><a href="https://rulerLwx.gitee.io/categories/java-framework/" class="category-list-link">java-framework</a><span class="category-list-count">38</span></li>
            <li class="category-list-item"><a href="https://rulerLwx.gitee.io/categories/java-front-end/" class="category-list-link">java-front-end</a><span class="category-list-count">11</span></li>
            <li class="category-list-item"><a href="https://rulerLwx.gitee.io/categories/java-se/" class="category-list-link">java-se</a><span class="category-list-count">21</span></li>
            <li class="category-list-item"><a href="https://rulerLwx.gitee.io/categories/java-senior/" class="category-list-link">java-senior</a><span class="category-list-count">4</span></li>
            <li class="category-list-item"><a href="https://rulerLwx.gitee.io/categories/linux/" class="category-list-link">linux</a><span class="category-list-count">13</span></li>
            <li class="category-list-item"><a href="https://rulerLwx.gitee.io/categories/tools/" class="category-list-link">tools</a><span class="category-list-count">1</span></li>
            <li class="category-list-item"><a href="https://rulerLwx.gitee.io/categories/%E6%8A%80%E6%9C%AF%E6%9D%82%E7%83%A9/" class="category-list-link">技术杂烩</a><span class="category-list-count">4</span></li>
            <li class="category-list-item"><a href="https://rulerLwx.gitee.io/categories/%E6%95%B0%E6%8D%AE%E5%BA%93/" class="category-list-link">数据库</a><span class="category-list-count">15</span></li>
        </ul>
    </div>
</div>
      <div class="widget">
    <h3 class="widget-title"> Tags</h3>
    <div class="widget-body">
        <ul class="tag-list">
            
            
            <li class="tag-list-item"><a href="https://rulerLwx.gitee.io/tags/jvm/" class="tag-list-link">jvm</a><span
                    class="tag-list-count">1</span></li>
            
            
            <li class="tag-list-item"><a href="https://rulerLwx.gitee.io/tags/%E5%A4%9A%E7%BA%BF%E7%A8%8B/" class="tag-list-link">多线程</a><span
                    class="tag-list-count">2</span></li>
            
            
            <li class="tag-list-item"><a href="https://rulerLwx.gitee.io/tags/%E7%BD%91%E7%BB%9C%E7%BC%96%E7%A8%8B/" class="tag-list-link">网络编程</a><span
                    class="tag-list-count">3</span></li>
            
        </ul>

    </div>
</div>
      
<div class="widget">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget-body">
        <ul class="recent-post-list list-unstyled no-thumbnail">
            <li>
                <div class="item-inner">
                    <p class="item-title">
                        <a href="https://rulerLwx.gitee.io/2020/07/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E4%B8%80%E6%89%B9%E9%87%8F%E7%A7%BB%E5%8A%A8%E9%87%8D%E5%91%BD%E5%90%8D%E6%96%87%E4%BB%B6/" class="title">自己动手（一）——批量移动、重命名文件</a>
                    </p>
                    <p class="item-date">
                        <time datetime="2020-07-27 17:50:02 &#43;0800 CST" itemprop="datePublished">2020-07-27</time>
                    </p>
                </div>
            </li>
            <li>
                <div class="item-inner">
                    <p class="item-title">
                        <a href="https://rulerLwx.gitee.io/2020/07/%E5%85%B3%E4%BA%8Einteger%E7%9A%84-128~127%E7%BC%93%E5%AD%98/" class="title">关于Integer的 -128~127缓存</a>
                    </p>
                    <p class="item-date">
                        <time datetime="2020-07-11 16:56:21 &#43;0800 CST" itemprop="datePublished">2020-07-11</time>
                    </p>
                </div>
            </li>
            <li>
                <div class="item-inner">
                    <p class="item-title">
                        <a href="https://rulerLwx.gitee.io/2020/07/%E8%B7%A8%E5%9F%9F%E9%97%AE%E9%A2%98/" class="title">跨域问题</a>
                    </p>
                    <p class="item-date">
                        <time datetime="2020-07-08 22:41:12 &#43;0800 CST" itemprop="datePublished">2020-07-08</time>
                    </p>
                </div>
            </li>
            <li>
                <div class="item-inner">
                    <p class="item-title">
                        <a href="https://rulerLwx.gitee.io/2020/07/%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/" class="title">个人博客搭建</a>
                    </p>
                    <p class="item-date">
                        <time datetime="2020-07-05 18:58:47 &#43;0800 CST" itemprop="datePublished">2020-07-05</time>
                    </p>
                </div>
            </li>
            <li>
                <div class="item-inner">
                    <p class="item-title">
                        <a href="https://rulerLwx.gitee.io/2020/07/mongodb-1/" class="title">MonggoDB-1</a>
                    </p>
                    <p class="item-date">
                        <time datetime="2020-07-03 18:58:47 &#43;0800 CST" itemprop="datePublished">2020-07-03</time>
                    </p>
                </div>
            </li>
        </ul>
    </div>
</div>
  </div>
</aside>

    
    
<aside class="sidebar sidebar-toc collapse" id="collapseToc" itemscope itemtype="http://schema.org/WPSideBar">
  <div class="slimContent">
    <h4 class="toc-title">Catalogue</h4>
    <nav id="toc" class="js-toc toc">

    </nav>
  </div>
</aside>
<main class="main" role="main"><div class="content">
  <article id="-" class="article article-type-" itemscope
    itemtype="http://schema.org/BlogPosting">
    
    <div class="article-header">
      <h1 itemprop="name">
  <a
    class="article-title"
    href="/2018/06/java-front-vue-2/"
    >Java-front-VUE-2</a
  >
</h1>

      <div class="article-meta">
        
<span class="article-date">
  <i class="icon icon-calendar-check"></i>&nbsp;
<a href="https://rulerLwx.gitee.io/2018/06/java-front-vue-2/" class="article-date">
  <time datetime="2018-06-20 10:03:02 &#43;0800 CST" itemprop="datePublished">2018-06-20</time>
</a>
</span>
<span class="article-category">
  <i class="icon icon-folder"></i>&nbsp;
  <a class="article-category-link" href="/categories/java-front-end/"> Java-front-end </a>
</span>

        <span class="post-comment"><i class="icon icon-comment"></i>&nbsp;<a href="/2018/06/java-front-vue-2/#comments"
            class="article-comment-link">Comments</a></span>
		<span class="post-wordcount hidden-xs" itemprop="wordCount">Word Count: 3443words</span>
		<span class="post-readcount hidden-xs" itemprop="timeRequired">Read Count: 7minutes </span>
      </div>
    </div>
    <div class="article-entry marked-body js-toc-content" itemprop="articleBody">
      <h1 id="事件">事件</h1>
<h2 id="事件函数传参">事件函数传参</h2>
<p>在 Vue 中，使用事件绑定机制，为元素指定处理函数时，如果加了小括号，就可以给函数传参</p>
<pre><code class="language-html">&lt;a href=&quot;&quot; @click.prevent=&quot;del(item.id)&quot;&gt;删除&lt;/a&gt;
</code></pre>
<h1 id="品牌列表案例">品牌列表案例</h1>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;品牌列表案例&lt;/title&gt;
    &lt;script src=&quot;../js/vue.js&quot;&gt;&lt;/script&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;../css/bootstrap-3.3.7.css&quot;&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;
        &lt;div class=&quot;panel panel-primary&quot;&gt;
            &lt;div class=&quot;panel-heading&quot;&gt;
                &lt;h3 class=&quot;panel-title&quot;&gt;添加品牌&lt;/h3&gt;
            &lt;/div&gt;
            &lt;div class=&quot;panel-body form-inline&quot;&gt;
                &lt;label&gt;ID:&lt;input type=&quot;text&quot; class=&quot;form-control&quot; v-model=&quot;id&quot;&gt;&lt;/label&gt;
                &lt;label&gt;Name:&lt;input type=&quot;text&quot; class=&quot;form-control&quot; v-model=&quot;name&quot;&gt;&lt;/label&gt;
                &lt;input type=&quot;button&quot; value=&quot;添加&quot; class=&quot;btn btn-primary&quot; @click=&quot;add&quot;/&gt;
                &lt;label&gt;搜索名称关键字：&lt;input type=&quot;text&quot; class=&quot;form-control&quot; v-model=&quot;keywords&quot;/&gt; &lt;/label&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;table class=&quot;table table-bordered table-hover table-striped&quot;&gt;
            &lt;thead&gt;
            &lt;tr&gt;
                &lt;th&gt;ID&lt;/th&gt;
                &lt;th&gt;Name&lt;/th&gt;
                &lt;th&gt;Ctime&lt;/th&gt;
                &lt;th&gt;Operation&lt;/th&gt;
            &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
            &lt;tr v-for=&quot;item in search2(keywords)&quot; :key=&quot;item.id&quot;&gt;
                &lt;td&gt;{{item.id}}&lt;/td&gt;
                &lt;td&gt;{{item.name}}&lt;/td&gt;
                &lt;td&gt;{{item.ctime}}&lt;/td&gt;
                &lt;td&gt;&lt;a href=&quot;&quot; @click.prevent=&quot;del2(item.id)&quot;&gt;删除&lt;/a&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;/tbody&gt;
        &lt;/table&gt;
    &lt;/div&gt;
    &lt;script&gt;
        var vm = new Vue({
            el:'#app',
            data:{
                id:'',
                name:'',
                keywords:'',
                list:[
                    {id:1,name:'奔驰',ctime:new Date()},
                    {id:2,name:'宝马',ctime:new Date()},
                    {id:3,name:'现代',ctime:new Date()}
                ]
            },
            methods:{
                add(){
                    this.list.push({id: this.id, name: this.name, ctime: new Date()});
                    this.id = this.name = '';
                },
                // 删除方式一
                del(id){
                    // some() 用于循环数组
                    this.list.some((item,i) =&gt; {
                        if (item.id == id) {
                            // 调用数组的 splice() 方法删除元素
                            this.list.splice(i, 1);
                            return true;//返回 true，终止这个数组的后续循环
                        }
                    });
                },
                // 删除方式二
                del2(id){
                    var index = this.list.findIndex(item =&gt; {
                        if (item.id == id) {
                            return true;
                        }
                    });
                    this.list.splice(index, 1);
                },
                search(keywords){
                    var newList = [];
                    this.list.forEach(item =&gt; {
                        if (item.name.indexOf(keywords) != -1) {
                            newList.push(item);
                        }
                    });
                    return newList;
                    // 为什么 keywords='' 时，返回的是完整的 list ？
                    // 看示例：&quot;abc&quot;.indexOf('') = 0
                    // 因为 不等于 -1，所有都加入新的数组中
                },
                search2(keywords){
                    // 注意：forEach some filter findIndex 这些都属于数组的新方法
                    // 都会对数组的每一项进行遍历，执行相关操作
                    // filter() 是 es6 提供的方法
                    var newList = this.list.filter(item =&gt;{
                        if (item.name.includes(keywords)) {
                            return 1;// 随便返回一个值，即：有返回值即可
                            // return true;
                        }
                    });
                    return newList;
                }
            }
        })
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<ul>
<li>ES6提供的新方法<code>String.prototype.includes(要包含的字符串)</code>，包含返回 true，否则返回 false</li>
<li></li>
</ul>
<h1 id="过滤器">过滤器</h1>
<p>Vue.js 允许你自定义过滤器，<strong>可被用作一些常见的文本格式化</strong>。过滤器可以用在两个地方：<strong>mustache 插值和 v-bind 表达式</strong>。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示：</p>
<ul>
<li>在双花括号中：<code>{{ message | 过滤器名称 }}</code></li>
<li>在 v-bind 中：<code>&lt;div v-bind:id=&quot;rawId | 过滤器名称&quot;&gt;&lt;/div&gt;</code></li>
</ul>
<h2 id="全局过滤器">全局过滤器</h2>
<p>在<strong>创建 Vue 实例之前</strong>定义全局过滤器。全局的过滤器<strong>可以应用于不同的 vm 实例</strong>，即：共享。</p>
<p>示例：</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;过滤器&lt;/title&gt;
    &lt;script src=&quot;../js/vue.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;
        &lt;p&gt;{{msg|msgFormat('aa','bb')}}&lt;/p&gt;
    &lt;/div&gt;
    &lt;script&gt;
        // 第一个参数规定是过滤器 {{msg|msgFormat('aa','bb')}} “管道”前面的值：msg
        // 之后的0个或多个是过滤器入参：msgFormat('aa','bb')
        Vue.filter(&quot;msgFormat&quot;, function (msg, arg1, arg2) {
            return msg.replace(/单纯/g, arg1 + arg2);
        });
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'曾经，我也是单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的人'
            },
            methods:{}
        })
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>过滤器可以串联：{{ message | filterA | filterB }}</p>
<h2 id="私有过滤器">私有过滤器</h2>
<p>一个页面可以有多个 vm 实例，在 vm 实例里面定义的过滤器就是私有过滤器</p>
<pre><code class="language-js">    var vm2 = new Vue({
       el:'#app2',
       data: {},
       methods:{},
       filters:{
           dateFormat:function (dateStr,pattern=&quot;&quot;) {
               
           }
       }
    });
</code></pre>
<p>当全局过滤器和局部过滤器重名时，会采用局部过滤器，“就近原则”。</p>
<p>知识点：
在es6中，可以使用</p>
<ul>
<li>String.padStart(maxLength: number,fillString?: string)</li>
<li>String.padEnd(maxLength: number,fillString?: string)</li>
</ul>
<p>在字符串的前面或后面补充给定的字符，例如，时间，分钟是个位数时，前面补0：<code>var min = dt.getMinutes().toString().padStart(2,0);</code></p>
<p>解释：总长度2，不足2位时，前面补0，如 06:03:08</p>
<h1 id="按键修饰符">按键修饰符</h1>
<h2 id="常用按键修饰符">常用按键修饰符</h2>
<p>例如，按 Enter 键时触发“添加”操作方法：<code>&lt;input type=&quot;text&quot; class=&quot;form-control&quot; v-model=&quot;name&quot; @keyup.enter=&quot;add&quot;&gt;</code></p>
<p>Vue 提供了绝大多数常用的按键码的别名：</p>
<ul>
<li>.enter</li>
<li>.tab</li>
<li>.delete (捕获“删除”和“退格”键)</li>
<li>.esc</li>
<li>.space</li>
<li>.up</li>
<li>.down</li>
<li>.left</li>
<li>.right</li>
</ul>
<h2 id="自定义按键修饰">自定义按键修饰</h2>
<p>通过 <strong>全局</strong>（跟 new Vue 同级） config.keyCodes 对象自定义按键修饰符别名：</p>
<p>Vue.config.keyCodes.f1 = 112; // 可以使用 <code>v-on:keyup.f1</code></p>
<p>对应的键盘码值参考《附件-相关文章》</p>
<h1 id="自定义全局指令">自定义全局指令</h1>
<p>使用<code>Vue.directive()</code>定义全局指令</p>
<p>注意：vue 中所有的指令，在调用时都以 v- 开头</p>
<h2 id="示例">示例</h2>
<pre><code class="language-html">&lt;input type=&quot;text&quot; class=&quot;form-control&quot; v-model=&quot;keywords&quot; v-focus v-color=&quot;'red'&quot;/&gt; 
</code></pre>
<pre><code class="language-js">    // 全局的定义
    // 光标锁定
    Vue.directive('focus',{
        // 第一个参数 el：表示被绑定了指令的那个元素，是一个原生 js 对象
        bind:function (el) {
    
        },
        inserted:function (el) {
            el.focus();
        },
        update:function () {
    
        }
    });
    // 字体颜色
    Vue.directive('color', {
        bind: function (el,binding) {
            // 内联样式
            // el.style.color = 'red';// 不应该写死，参数应该从页面传来
            el.style.color = binding.value;
        }
    });
</code></pre>
<p>这三个方法有对应的执行时机，系统内置的（规定好了的），参考下一节</p>
<h2 id="勾子函数">勾子函数</h2>
<ul>
<li><code>bind:function(el){}</code> 每当指令绑定到元素上时（这个时候还没有插入到dom中），会执行 bind 函数，只执行1次</li>
<li><code>inserted:function(el){}</code> 元素插入到 dom 中时，触发1次</li>
<li><code>updated:function(){el}</code> 当 VNode 时，可能会触发多冷</li>
</ul>
<p>如果有参数，那么，<strong>第一个参考永远是 el，表示被绑定指令的那个元素，el 是原生 js 对象</strong>，可以执行原生的 js 方法。</p>
<p>参考官网：https://cn.vuejs.org/v2/guide/custom-directive.html</p>
<p>总结：</p>
<ul>
<li>bind 的执行时机比 inserted 早</li>
<li>跟样式相关的操作，一般可以在 bind 中执行</li>
<li>跟 js 相关的操作，一般可以在 inserted 中执行</li>
</ul>
<h2 id="勾子函数参数">勾子函数参数</h2>
<pre><code>    Vue.directive('color', {
        bind: function (el,binding) {
            el.style.color = binding.value;
            console.log(binding.value)// red
            console.log(binding.expression)// 'red'
        }
    });
</code></pre>
<p>常用的勾子函数参数、属性：</p>
<ul>
<li>el 第一个参数</li>
<li>binding 第二个参数
<ul>
<li>value 属性</li>
<li>expression 属性</li>
</ul>
</li>
</ul>
<p>参考官网：https://cn.vuejs.org/v2/guide/custom-directive.html#%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0%E5%8F%82%E6%95%B0</p>
<p>总结：理解参数的原理，参数的位置不能变，但，名字可以改。如：第二个参数可以写成 binding123456 。</p>
<h2 id="私有-自定义指令">私有-自定义指令</h2>
<pre><code>    &lt;div id=&quot;app2&quot;&gt;
        &lt;label v-fontweight=&quot;'initial'&quot;&gt;这是一行文字&lt;/label&gt;
    &lt;/div&gt;
    &lt;script&gt;
        var vm2 = new Vue({
           el:'#app2',
           data: {},
           methods:{},
           filters:{
           },
            directives:{
               'fontweight':{
                   bind: function (el, binding) {
                       el.style.fontWeight = binding.value;
                   }
               }
            }
        });
    &lt;/script&gt;
</code></pre>
<h2 id="指令函数简写">指令函数简写</h2>
<p>在 bind 和 update 时，可以简写（暗示 inserted 不能简写？？？）</p>
<p>全局指令</p>
<pre><code class="language-js">    Vue.directive('color-swatch', function (el, binding) {
      el.style.backgroundColor = binding.value
    })
</code></pre>
<p>私有指令</p>
<pre><code class="language-html">    &lt;div id=&quot;app2&quot;&gt;
        &lt;label v-fontweight=&quot;'initial'&quot; v-fontsize=&quot;'30px'&quot;&gt;这是一行文字&lt;/label&gt;
    &lt;/div&gt;
    &lt;script&gt;
        var vm2 = new Vue({
           el:'#app2',
           data: {},
           methods:{},
           filters:{
               dateFormat:function (dateStr,pattern=&quot;&quot;) {
                   dateStr.padStart()
               }
           },
            directives:{
               'fontweight':{
                   bind: function (el, binding) {
                       el.style.fontWeight = binding.value;
                   }
               },
                // 指令简写，只应用在 bind/update 阶段
                'fontsize':function (el,binding) {
                   console.log(binding.value)
                    el.style.fontSize = parseInt(binding.value) + 'px';
                }
            }
        });
    &lt;/script&gt;
</code></pre>
<p>知识点：parseInt()方法可以去掉 px ，而只剩下数字。也就是说，v-fontsize=&rdquo;&lsquo;30px&rsquo;&rdquo; 与 v-fontsize=&rdquo;&lsquo;30&rsquo;&rdquo; 等价 ——20190924</p>
<p>参考：https://cn.vuejs.org/v2/guide/custom-directive.html#%E5%87%BD%E6%95%B0%E7%AE%80%E5%86%99</p>
<h1 id="vue-生命周期">vue 生命周期</h1>
<h2 id="什么是生命周期">什么是生命周期</h2>
<p>从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！</p>
<p>换句话说，生命周期就是事件。事件有创建和销毁。另一种，生命周期钩子 = 生命周期函数 = 生命周期事件</p>
<h2 id="生命周期函数分类">生命周期函数分类</h2>
<p>分三类：</p>
<ul>
<li>创建期间的生命周期函数：
<ul>
<li>beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性</li>
<li>created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板</li>
<li>beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中</li>
<li>mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示</li>
</ul>
</li>
<li>运行期间的生命周期函数：
<ul>
<li>beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点</li>
<li>updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！</li>
</ul>
</li>
<li>销毁期间的生命周期函数：
<ul>
<li>beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。</li>
<li>destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。</li>
</ul>
</li>
</ul>
<p>总结：</p>
<ul>
<li>以上生命周期，<strong>针对的是 vue 实例</strong>，而不是某个具体事件</li>
<li>如果要调用 methods 中的方法或操作 data 中的数据，最早只能在 created 中操作</li>
<li>如果要操作页面上的 dom 节点，最早要在 mounted 中进行</li>
</ul>
<p><img src="https://gitee.com/leafsing/pic/raw/master/img/20200709013251.png" alt=""></p>
<p>官网参考：https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA</p>
<h2 id="生命周期的应用">生命周期的应用</h2>
<p><strong>vue 实例</strong>的生命周期怎么使用？写在哪些地方？</p>
<pre><code class="language-html">&lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;
    &lt;/div&gt;
    &lt;script&gt;
        var vm = new Vue({
            el:'#app',
            data:{},
            methods:{},
            beforeCreate(){
                console.log(&quot;beforeCreate&quot;);
            },
            created(){
                console.log(&quot;created()&quot;)
            },
            beforeMount(){},
            mounted(){},
            updated(){},
            beforeDestroy(){},
            destroyed(){}
        })
    &lt;/script&gt;
&lt;/body&gt;
</code></pre>
<p>总结：vue 实例的生命周期方法跟 el/data/methods 等，同级。</p>
<h1 id="附件-相关文章">附件-相关文章</h1>
<ol>
<li><a href="https://v1-cn.vuejs.org/">vue.js 1.x 文档</a></li>
<li><a href="https://cn.vuejs.org/">vue.js 2.x 文档</a></li>
<li><a href="http://www.css88.com/archives/7715">String.prototype.padStart(maxLength, fillString)</a></li>
<li><a href="http://www.cnblogs.com/wuhua1/p/6686237.html">js 里面的键盘事件对应的键码</a></li>
<li><a href="https://github.com/pagekit/vue-resource">pagekit/vue-resource</a></li>
<li><a href="https://jingyan.baidu.com/article/a65957f4976aad24e67f9b9b.html">navicat如何导入sql文件和导出sql文件</a></li>
<li><a href="http://cubic-bezier.com/#.4,-0.3,1,.33">贝塞尔在线生成器</a></li>
</ol>

    </div>
    <div class="article-footer">
<blockquote class="mt-2x">
  <ul class="post-copyright list-unstyled">
    <li class="post-copyright-link hidden-xs">
      <strong>Permalink: </strong>
      <a href="https://rulerLwx.gitee.io/2018/06/java-front-vue-2/" title="Java-front-VUE-2" target="_blank" rel="external">https://rulerLwx.gitee.io/2018/06/java-front-vue-2/</a>
    </li>
    <li class="post-copyright-license">
      <strong>License：</strong><a href="http://creativecommons.org/licenses/by/4.0/deed.zh" target="_blank" rel="external">CC BY 4.0 CN</a>
    </li>
  </ul>
</blockquote>

<div class="panel panel-default panel-badger">
  <div class="panel-body">
    <figure class="media">
      <div class="media-left">
        <a href="https://gitee.com/rulerLwx" target="_blank" class="img-burn thumb-sm visible-lg">
          <img src="https://rulerLwx.gitee.io/avatar.png" class="img-rounded w-full" alt="">
        </a>
      </div>
      <div class="media-body">
        <h3 class="media-heading"><a href="https://gitee.com/rulerLwx" target="_blank"><span class="text-dark">rulerLwx</span><small class="ml-1x">thinking...</small></a></h3>
        <div>Good Good Study, Day Day Up~</div>
      </div>
    </figure>
  </div>
</div>
    </div>
  </article>
<section id="comments">
    <div id="vcomments"></div>
</section>

</div><nav class="bar bar-footer clearfix" data-stick-bottom>
    <div class="bar-inner">
        <ul class="pager pull-left">
            <li class="prev">
                <a href="https://rulerLwx.gitee.io/2018/06/java-front-vue-1/" title="Java-front-VUE-1"><i
                        class="icon icon-angle-left"
                        aria-hidden="true"></i><span>&nbsp;&nbsp;Older</span></a>
            </li>
            <li class="next">
                <a href="https://rulerLwx.gitee.io/2018/06/java-front-vue-3-vue-resource/"
                    title="Java-front-VUE-3-vue-resource"><span>Newer&nbsp;&nbsp;</span><i
                        class="icon icon-angle-right" aria-hidden="true"></i></a>
            </li>
            
            <li class="toggle-toc">
                <a class="toggle-btn collapsed" data-toggle="collapse" href="#collapseToc" aria-expanded="false"
                    title="Catalogue" role="button">
                    <span>[&nbsp;</span><span>Catalogue</span>
                    <i class="text-collapsed icon icon-anchor"></i>
                    <i class="text-in icon icon-close"></i>
                    <span>]</span>
                </a>
            </li>
        </ul>
        <div class="bar-right">
            <div class="share-component" data-sites="weibo,qq,wechat"
                data-mobile-sites="weibo,qq,qzone"></div>
        </div>
    </div>
</nav>

</main><footer class="footer" itemscope itemtype="http://schema.org/WPFooter">
<ul class="social-links">
    <li><a href="https://gitee.com/rulerLwx" target="_blank" title="gitee" data-toggle=tooltip data-placement=top >
            <i class="icon icon-gitee"></i></a></li>
    <li><a href="https://github.com/wolf-lea" target="_blank" title="github" data-toggle=tooltip data-placement=top >
            <i class="icon icon-github"></i></a></li>
</ul>
  <div class="copyright">
    &copy;2017  -
    2020
    <div class="publishby">
        Theme by <a href="https://github.com/xiaoheiAh" target="_blank"> xiaoheiAh </a>base on<a href="https://github.com/xiaoheiAh/hugo-theme-pure" target="_blank"> pure</a>.
    </div>
  </div>
</footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_SVG"></script>
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
            showMathMenu: false, //disables context menu
            tex2jax: {
            inlineMath: [ ['$','$'], ['\\(','\\)'] ]
           }
    });
</script>


<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<script>
    window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')
</script>
<script type="text/javascript" src="https://cdn.staticfile.org/highlight.js/9.15.10/highlight.min.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/highlight.js/9.15.10/languages/python.min.js" defer></script>
<script type="text/javascript" src="https://cdn.staticfile.org/highlight.js/9.15.10/languages/javascript.min.js" defer></script><script>
    hljs.configure({
        tabReplace: '    ', 
        classPrefix: ''     
        
    })
    hljs.initHighlightingOnLoad();
</script>
<script src="https://rulerLwx.gitee.io/js/application.min.bdeb64b910570b6c41badc6a05b7afb0c8ad9efd8525de3c7257d59e786326a3.js"></script>
<script src="https://rulerLwx.gitee.io/js/plugin.min.51ff8c7317566f82259170fa36e09c4493adc9b9378b427a01ad3f017ebac7dd.js"></script>

<script>
    (function (window) {
        var INSIGHT_CONFIG = {
            TRANSLATION: {
                POSTS: 'Posts',
                PAGES: 'Pages',
                CATEGORIES: 'Categories',
                TAGS: 'Tags',
                UNTITLED: '(Untitled)',
            },
            ROOT_URL: 'https:\/\/rulerLwx.gitee.io',
            CONTENT_URL: 'https:\/\/rulerLwx.gitee.io\/searchindex.json ',
        };
        window.INSIGHT_CONFIG = INSIGHT_CONFIG;
    })(window);
</script>
<script type="text/javascript" src="https://rulerLwx.gitee.io/js/insight.min.a343cd9a5a7698336b28ef3a7c16a3a1b1d2d5fb17dc8ed04022bbe08cc5459073a15bdafa3a8a58cdd56080784bdd69fa70b1ae8597565c799c57ed00f0e120.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.min.js"></script>
<script>
    tocbot.init({
        
        tocSelector: '.js-toc',
        
        contentSelector: '.js-toc-content',
        
        headingSelector: 'h1, h2, h3',
        
        hasInnerContainers: true,
    });
</script>

<script src="https://cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/valine"></script>
<script type="text/javascript">
    var GUEST = ['nick', 'mail', 'link'];
    var meta = 'nick,mail';
    meta = meta.split(',').filter(function (item) {
        return GUEST.indexOf(item) > -1;
    });
    new Valine({
        el: '#vcomments',
        verify: null ,
        notify: null ,
        appId: 'IyAB0PSPRazTPDxitO1ddQ7O-gzGzoHsz',
        appKey: '5rBJTq4KidYF33eXwvRVhtEH',
        placeholder: 'enjoy~',
        avatar: 'mm',
        meta: meta,
        pageSize: '10' || 10,
        visitor: false 
});
</script>

  </body>
</html>
